<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口标准化 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimun-scale=1.0, maximun-scale=1.0, user-scale=no">
    <title>售货机--设备详情</title>
    <!-- 引入首页样式 -->
    <link rel="stylesheet" href="./css/device_cpfr.css">
</head>

<body>
    <!-- 第一部分：nav导航栏 -->
    <section class="nav">
        <!-- 管理左侧 -->
        <a href="./device_agent.html" class="left">设备详情</a>
        <!-- 管理右侧 -->
        <div class="right">|</div>
    </section>


    <!-- 第二部分：主体部分 -->
    <section class="main">
        <div class="title">设备SN:</div>
        <div class="part">
            <div class="template1">
                <div class="info">
                    <div class="left"></div>
                    <div class="right">
                        <div class="name">YAYO男神冠军XXX</div>
                        <!-- <div class="price1">成本</div>
                        <div class="price2">售价</div> -->
                        <div class="state">是否缺货</div>
                    </div>
                </div>
                <div class="btn">
                    <div class="btn1">更换状态</div>
                    <div class="btn2">开仓补货</div>
                </div>
            </div>
            <div class="template2">
                <div class="info">
                    <div class="left"></div>
                    <div class="right">
                        <div class="name">小贝壳XXX</div>
                        <div class="state">是否缺货</div>
                    </div>
                </div>
                <div class="btn">
                    <div class="btn1">更换状态</div>
                    <div class="btn2">开仓补货</div>
                </div>
            </div>
            <div class="template3">
                <div class="info">
                    <div class="left"></div>
                    <div class="right">
                        <div class="name">第六感XXX</div>
                        <!-- <div class="price1">成本</div>
                        <div class="price2">售价</div> -->
                        <div class="state">是否缺货</div>
                    </div>
                </div>
                <div class="btn">
                    <div class="btn1">更换状态</div>
                    <div class="btn2">开仓补货</div>
                </div>
            </div>
            <div class="template4">
                <div class="info">
                    <div class="left"></div>
                    <div class="right">
                        <div class="name">冈本XXXX</div>
                        <!-- <div class="price1">成本</div>
                        <div class="price2">售价</div> -->
                        <div class="state">是否缺货</div>
                    </div>
                </div>
                <div class="btn">
                    <div class="btn1">更换状态</div>
                    <div class="btn2">开仓补货</div>
                </div>
            </div>
            <div class="template5">
                <div class="info">
                    <div class="left"></div>
                    <div class="right">
                        <div class="name">印古XXXX</div>
                        <!-- <div class="price1">成本</div>
                        <div class="price2">售价</div> -->
                        <div class="state">是否缺货</div>
                    </div>
                </div>
                <div class="btn">
                    <div class="btn1">更换状态</div>
                    <div class="btn2">开仓补货</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 第三部分：底部确认 -->
    <section class="footer">
        <div class="li1">全部开仓</div>
        <div class="li2">一键补货</div>
    </section>
</body>

</html>